<template>
  <j-modal
    :title="title"
    :width="950"
    :visible="visible"
    :maskClosable="false"
    @close="close"
  >
    <template slot="footer">
      <a-button type="primary" @click="close">确定</a-button>
    </template>
    <a-form layout="inline" style="display: flex;justify-content: space-between">
      <a-form-item label="单位">
        <a-input v-model="queryParam.depName" disabled placeholder="单位"></a-input>
      </a-form-item>
      <a-form-item label="项目">
        <a-input v-model="queryParam.proName" disabled placeholder="项目"></a-input>
      </a-form-item>
      <a-form-item label="时间">
        <a-range-picker format="yyyy-MM-DD" value-format="yyyy-MM-DD" v-model="queryParam.date"/>
      </a-form-item>
    </a-form>
    <a-divider style="color: white;margin: 10px 0">条件选择</a-divider>
    <div style="margin: 0 auto" :class="{ isCheck: isCheck }">
      <a-row :gutter="20">
        <a-col :span="6" style="height: 60vh;overflow: auto;">
          <deptTree v-model="queryParam.depId" @getDeptName="(name)=>{ queryParam.depName = name }"/>
        </a-col>
        <a-col :span="18">
          <a-table
            :rowSelection="{ selectedRowKeys: selectedRowKeys,onChange: onSelectChange,type: 'radio'}"
            :customRow="setRow"
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            @change="handleTableChange">
              <span slot="action" slot-scope="text, record">
                <a @click="">详情</a>
              </span>
          </a-table>
        </a-col>
      </a-row>

    </div>
    <!-- table区域-end -->
  </j-modal>
</template>
<script>
  import deptTree from './deptTree'
  import columns from "./indexColumns";
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import * as lodash from "lodash";

  export default {
    name: 'selectModel',
    mixins: [JeecgListMixin],
    prop: ['payload'],
    components: {deptTree},
    data() {
      return {
        ipagination: {
          current: 1,
          pageSize: 10,
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: false,
          total: 0
        },
        title: '查询条件',
        labelCol: {span: 4},
        wrapperCol: {span: 18},
        visible: false,
        isCheck: false,
        queryParam: {date: ['2019-01-01']},
        disableMixinCreated: true,
        columns: columns(this),
        selectedRowKeys: [],
        selectedRows: [],
        url: {
          list: '/modelTeam/queryProjectList',
        }
      }
    },
    created() {
    },
    watch: {
      'queryParam.depId': function (val) {
        debugger
        console.log(this.queryParam.depId);
        this.dataSource = []
        if (val) {
          this.loadData()
        }
      },

    },
    methods: {
      setRow(record) {
        return {
          on: {
            click: () => {
              let rowKeys = []
              rowKeys.push(record.id);
              this.selectedRowKeys = rowKeys;
              this.queryParam.proId = this.selectedRowKeys[0]
              this.queryParam.proName = record.projectName
              console.log(this.selectedRowKeys)
            }
          }
        };
      },
      onSelectChange(selectedRowKeys, data) {
        console.log("selectedRowKeys changed: ", selectedRowKeys);
        this.selectedRowKeys = selectedRowKeys;
        this.queryParam.proId = data[0].id
        this.queryParam.proName = data[0].projectName
      },

      edit(record) {
        console.log(record);debugger
        if(record){
          this.queryParam = record
          this.visible = true
        }else{
          this.queryParam.data =['2019-01-01']
          this.visible = true
        }
      },
      close(isSubmit) {
        if (this.selectedRowKeys.length > 0 && this.queryParam.date.length > 0) {
          if (isSubmit) {
            this.$emit('getSelectData', this.queryParam)
            console.log(this.queryParam);
            this.visible = false
          } else {
            this.visible = false
          }
        } else {
          this.$message.error('请选择项目和时间')
        }

      }
    }
  }
</script>
<style lang="css" scoped>

  /deep/ .ant-calendar-picker:hover .ant-calendar-picker-clear {
    color: #13D4D5;
    background: transparent;
  }

  /deep/ .ant-calendar-range-picker-separator {
    color: #13D4D5 !important;
  }

  /deep/ .ant-table-tbody > tr.ant-table-row-selected td {
    color: #13D4D5;
    background: rgba(255, 255, 255, 0.4);
  }

  /deep/ .ant-input {
    border-color: #13D4D5;
    background: transparent;
    color: #13D4D5 !important;
  }

  /deep/ .ant-form-item-label > label {
    color: #13D4D5 !important;
  }

  /deep/ .ant-table-thead > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
  /deep/ .ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
  /deep/ .ant-table-thead > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
  /deep/ .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
    background: rgba(255, 255, 255, 0.4);
    color: black !important;
  }

  /deep/ .ant-modal-header, /deep/ .ant-modal-title, /deep/ .ant-modal-close {
    background: transparent !important;
    color: #13D4D5;
  }

  /deep/ .ant-btn-primary {
    background-color: transparent !important;
    border-color: #1890FF !important;
  }

  /deep/ .ant-table-placeholder {
    background: transparent;
  }

  /deep/ .ant-empty-description {
    color: white;
  }

  /deep/ .ant-pagination-item-active {
    background: transparent;
    border-color: #13D4D5;
  }

  /deep/ .ant-pagination li a {
    color: white !important;
  }

  /deep/ .ant-pagination {
    color: white;
  }

  /deep/ .ant-table-thead tr th {
    color: white;
    background: transparent;
  }

  /deep/ .ant-table-tbody tr td {
    color: white;
    background: transparent;
  }

  /deep/ .ant-card {
    background-color: transparent;
    color: white;
  }

  /deep/ .ant-modal-content {
    background: url(~@/assets/hgxjc/lwdwyj/bg.png) no-repeat;
  }
</style>
<style lang="less" scoped>
  .ant-row {
    height: 100%;

    .ant-col {
      height: 100%;

      .ant-card {
        height: 100%;

        /deep/ .ant-card-body {
          padding: 15px;
        }
      }
    }

  }
</style>
